<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <h1>MetallicMaterial</h1>
    <p>A physically-correct metallic/roughness material that renders with Cook-Torrance, GGX & Shlick's Fresnel
        approximation.</p>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/mesh/Mesh.js~Mesh.html"
               target="_other">Mesh</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/geometry/ReadableGeometry.js~ReadableGeometry.html"
               target="_other">ReadableGeometry</a>
        </li>
        <li>
            <a href="../../docs/function/index.html#static-function-loadOBJGeometry"
               target="_other">loadOBJGeometry()</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/MetallicMaterial.js~MetallicMaterial.html"
               target="_other">MetallicMaterial</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/Texture.js~Texture.html"
               target="_other">Texture</a>
        </li>
    </ul>
</div>
</body>

<script id="source" type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        LinearEncoding,
        sRGBEncoding,
        Viewer,
        Mesh,
        loadOBJGeometry,
        ReadableGeometry,
        MetallicMaterial,
        Texture,
        DirLight,
        LightMap,
        ReflectionMap
    } from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas"
    });

    new ReflectionMap(viewer.scene, {
        src: [
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PX.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NX.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PY.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NY.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_PZ.png",
            "../../assets/textures/reflect/Uffizi_Gallery/Uffizi_Gallery_Radiance_NZ.png"
        ],
        encoding: sRGBEncoding
    });

    new LightMap(viewer.scene, {
        src: [
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PX.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NX.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PY.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NY.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_PZ.png",
            "../../assets/textures/light/Uffizi_Gallery/Uffizi_Gallery_Irradiance_NZ.png"
        ],
        encoding: sRGBEncoding
    });

    viewer.scene.camera.eye = [0.57, 1.37, 1.14];
    viewer.scene.camera.look = [0.04, 0.58, 0.00];
    viewer.scene.camera.up = [-0.22, 0.84, -0.48];

    viewer.scene.gammaOutput = true;
    viewer.scene.gammaFactor = 2.0;

    viewer.scene.clearLights();

    new DirLight(viewer.scene, {
        dir: [0.8, -0.6, -0.8],
        color: [1.0, 1.0, 1.0],
        intensity: 1.0,
        space: "view"
    });

    new DirLight(viewer.scene, {
        dir: [-0.8, -0.4, -0.4],
        color: [1.0, 1.0, 1.0],
        intensity: 1.0,
        space: "view"
    });

    new DirLight(viewer.scene, {
        dir: [0.2, -0.8, 0.8],
        color: [1.0, 1.0, 1.0],
        intensity: 1.0,
        space: "view"
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with torus shape
    //------------------------------------------------------------------------------------------------------------------

    loadOBJGeometry(viewer.scene, {
        src: "../../assets/models/obj/fireHydrant/FireHydrantMesh.obj"
    })
        .then(function (geometry) {

                // Success

                new Mesh(viewer.scene, {

                    geometry: new ReadableGeometry(viewer.scene, geometry),

                    material: new MetallicMaterial(viewer.scene, {

                        baseColor: [1, 1, 1],
                        metallic: 1.0,
                        roughness: 1.0,

                        baseColorMap: new Texture(viewer.scene, {
                            src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
                            encoding: sRGBEncoding
                        }),
                        normalMap: new Texture(viewer.scene, {
                            src: "../../assets/models/obj/fireHydrant/fire_hydrant_Normal_OpenGL.png"
                        }),
                        roughnessMap: new Texture(viewer.scene, {
                            src: "../../assets/models/obj/fireHydrant/fire_hydrant_Roughness.png"
                        }),
                        metallicMap: new Texture(viewer.scene, {
                            src: "../../assets/models/obj/fireHydrant/fire_hydrant_Metallic.png"
                        }),
                        occlusionMap: new Texture(viewer.scene, {
                            src: "../../assets/models/obj/fireHydrant/fire_hydrant_Mixed_AO.png"
                        }),

                        specularF0: 0.7
                    })
                });
            },
            function () {
                // Error
            });

</script>
</html>
